<template>
  <div ref="tableContainer" style="width: 800px; height: 400px"></div>
</template>

<script>
import Handsontable from "handsontable";
import "handsontable/dist/handsontable.css";

export default {
  data() {
    return {
      tableData: [
        ["A1", "B1", "C1"],
        ["A2", "B2", "C2"],
        ["A3", "B3", "C3"],
      ],
      tableColumns: [
        { type: "text", title: "Column 1", data: 0 },
        { type: "text", title: "Column 2", data: 1 },
        { type: "text", title: "Column 3", data: 2 },
      ],
      hotSettings: {
        data: this.tableData,
        columns: this.tableColumns,
        colHeaders: true,
        rowHeaders: true,
        licenseKey: "non-commercial-and-evaluation", // for non-commercial use only
      },
    };
  },
  mounted() {
    const container = this.$refs.tableContainer;
    this.hotInstance = new Handsontable(container, this.hotSettings);
    // 更新表格的宽度和高度
    this.hotInstance.updateSettings({
      width: 800,
      height: 400,
    });
  },
};
</script>